<template>
  <div class="search" style="">
    <div class="home-title">
      <span @click="jumpFn()" style="color: #fff">
        <van-icon name="arrow-left"
      /></span>
      <span style="font-weight: 900; color: #fff">{{ backFn.name }}</span>
      <span class="checkCity" @click="jumpFn()">切换城市</span>
    </div>
    <div class="home-bottom">
      <input
        type="text"
        name=""
        id=""
        placeholder="ლ(′◉❥◉`ლ)"
        v-model="searchV"
        class="searchResult"
      /><br />

      <button class="submit" @click="jumpTj(searchV), get_search()">
        提交
      </button>
    </div>
    <p class="search-history" @click="historyValB()">搜索历史</p>
    
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "search",
  data() {
    return {
      city: {},
      searchV: "",
      arrA: {},
      historyList: [],
    };
  },
  created() {
    // this.historyList = this.$route.query.historyList
  },
  computed: {
    backFn() {
      return this.$store.state.allObj;
    },
  },
  methods: {
    historyValB() {
       this.$store.commit("changeHistory",this.historyList);
      $(".searchVal>li").fadeIn();
      console.log(this.historyList)
      this.$router.push({
        name: "searchHistory",
      });
    },
    jumpTj(searchV) {
      this.$store.commit("changeVal", searchV);
      this.$router.push({
        name: "searchCityVal",
      });
    },
    jumpFn() {
      this.$store.commit("changeObj")
      this.$router.push({
        name: "allCity",
      })
    },
    get_search() {
      if (this.searchV == "") {
    
        return false;
      } else {
        if (!this.historyList.includes(this.searchV)) {
          this.historyList.unshift(this.searchV);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        } else {
          let i = this.historyList.indexOf(this.searchV);
          this.historyList.splice(i, 1);
          this.historyList.unshift(this.searchV);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        }
      }
    },
  },
  mounted() {
    //如果本地存储的数据historyList有值，直接赋值给data中的historyList
    if (JSON.parse(localStorage.getItem("historyList"))) {
      this.historyList = JSON.parse(localStorage.getItem("historyList"));
    }
  },
};
</script>
<style  scoped>
.home-title {
  width: 100%;
  height: 1.2576rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
  position: fixed;
  top: 0;
  left: 0;
}
.searchResult {
  border: none;
  width: 100%;
  height: 1.2576rem;
}
.checkCity {
  font-size: 0.3784rem;
  color: #fff;
}
.home-bottom {
  margin-top: 1.9rem;
  text-align: center;
}
.home-bottom input {
  border-radius: 5px;
  width: 90%;
  color: black;
}

.home-bottom button {
  width: 90%;
  background-color: #0092e8;
  border: none;
  border-radius: 5px;
  margin-top: 10px;
  color: #fff;
}
.search-history {
  font-size: 14px;
  color: black;
  border-bottom: 1px solid #e6e6e6;
}

</style>